<template>
  <div class="dataPicker" :class="type.includes('range') ? '' : 'single' ">
    <el-date-picker
      size="small"
      v-model="value1"
      :type="type"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="change"
    >
    </el-date-picker>
  </div>
</template>

<script>
import moment from "moment";
export default {
  props: {
    value: {
      type: Array | String,
      default: ()=>[],
    },
    type: {
      type: String,
      default: 'daterange',
    },
  },
  data() {
    return {
      value1: [moment(), moment()],
    };
  },
  created() {
    this.value1 = this.value
  },
  methods: {
    change(val){
        if (this.type === 'year') {
          const val1 = moment(val).format('YYYY')
          this.$emit("change", val1)
          return
        }
        const val1 = moment(val[0]).format('YYYY-MM-DD')
        const val2 = moment(val[1]).format('YYYY-MM-DD')
        this.$emit("change",[val1, val2])
    }
  },
};
</script>

<style lang="scss" scope>
.dataPicker {
  .el-range-editor {
    width: 136px;
    font-size: 10px;
    padding-left: 4px;
    padding-right: 0px;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    background-color: rgb(8, 57, 117);
    border: 1px solid rgb(62, 114, 195);
    input{
        font-size: 10px;
        color: rgb(167, 187, 216);
        background-color: rgb(8, 57, 117);
    }
    .el-range__close-icon{
        display: none;
    }
    .el-range__icon{
        line-height: 12.5px;
        width: 20px;
    }
    .el-range-separator{
        padding: 0;
        line-height: 10px;
        color: rgb(167, 187, 216);
    }
  }
}

.single{
  .el-date-editor {
    width: 120px;
    font-size: 10px;
    padding-left: 4px;
    padding-right: 0px;
    font-size: 10px;
    height: 20px;
    line-height: 20px;
    // background-color: rgb(8, 57, 117);
    // border: 1px solid rgb(62, 114, 195);
    input{
        font-size: 10px;
        color: rgb(167, 187, 216);
        background-color: rgb(8, 57, 117);
        line-height: 10px;
        // padding: 0;
        height: 20px;
    }
    .el-icon-circle-close{
        display: none;
    }
    .el-input__icon{
        line-height: 12.5px;
        width: 20px;
    }
    // .el-range-separator{
    //     padding: 0;
    //     line-height: 10px;
    //     color: rgb(167, 187, 216);
    // }
  }
}
</style>
